<template>
  <view>
    <view
      v-if="true"
      @click="() => {}"
      title="assad哈哈哈"
      :value="true ? '嘿嘿嘿' : '呵呵呵'"
      >这是一段内容</view
    >
    <view
      title="assad哈哈哈"
      :value="true ? '嘿嘿嘿' : '呵呵呵'"
      >{{ true ? "啾啾" : "当代的" }}</view
    >
  </view>
</template>


<I18n></I18n>

import I18n from 'components/i18n/index';



<template>
  <view class="toggle-lang">
    <view class="toggle-lang-item" :class="{ 'is-active': locale === 'zh-Hans' }" @click="chengLocale('zh-Hans')">简体中文</view>
    <view>|</view>
    <view class="toggle-lang-item" :class="{ 'is-active': locale === 'en' }" @click="chengLocale('en')">English</view>
  </view>
</template>

<script>
export default {
  name: 'i18n',
  props: {},
  data() {
    return {};
  },
  computed: {
    locale() {
      return this.$store.state.locales.lang;
    },
  },
  methods: {
    chengLocale(lang) {
      this.$store.commit('setLang', { lang, _this: this });
    },
  },
};
</script>

<style lang="scss" scoped>
.toggle-lang {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #303030;
  .toggle-lang-item {
    cursor: pointer;
    &.is-active {
      color: #007aff;
    }
  }
}
</style>



export default {
  state: {
    lang: uni.getStorageSync('locale') || 'zh-Hans',
    langList: [
      { text: '中文', value: 'zh-Hans' },
      { text: 'English', value: 'en' },
    ]
  },
  mutations: {
    setLang(state, { lang, _this }) { //设置参数
      console.log("🚀 ~ setLang ~ lang:", lang)
      state.lang = lang;
      uni.setStorageSync('locale', lang)
      uni.setLocale(lang)
      _this.$i18n.locale = lang;
    },
  },
}
